<template>
  <div>
    <div class="demo-inner-divider">AutoComplete 输入框</div>
    <e-autoComplete
      v-model="value1"
      :data="data1"
      @on-search="handleSearch1"
      transfer
      clearable
      placeholder="input here"
      style="width: 200px"
    ></e-autoComplete>
    <br /><br />
    <e-autoComplete
      v-model="value2"
      transfer
      @on-search="handleSearch2"
      placeholder="input here"
      style="width: 200px"
    >
      <e-option v-for="item in data2" :value="item" :key="item">{{
        item
      }}</e-option>
    </e-autoComplete>
    <br /><br />
    <e-autoComplete
      v-model="value3"
      :data="data3"
      :filter-method="filterMethod"
      placeholder="input here"
      style="width: 200px"
    >
    </e-autoComplete>
    <br /><br /><br /><br />
    <autoComplete-md class="markdown-body"></autoComplete-md>
  </div>
</template>
<script>
import autoCompleteMd from '../../docs/autoComplete.md'
export default {
  name: 'DemoAutoComplete',
  components: {
    autoCompleteMd,
  },
  data() {
    return {
      value1: '',
      data1: [],

      value2: '',
      data2: [],

      value3: '',
      data3: ['hello', 'nihao', 'hi'],
    }
  },
  methods: {
    handleSearch1(value) {
      this.data1 = !value ? [] : [value, value + value, value + value + value]
    },
    handleSearch2(value) {
      this.data2 =
        !value || value.indexOf('@') >= 0
          ? []
          : [value + '@qq.com', value + '@sina.com', value + '@163.com']
    },
    filterMethod(value, option) {
      return option.toUpperCase().indexOf(value.toUpperCase()) !== -1
    },
  },
}
</script>
<style>

</style>
